<template>
  <div>
    <v-touch class="swiper-div" @swiperight="onSwiperRight" :swipe-options="{direction: 'horizontal'}">
      <div class="home div-align-justify-center">
      <div class="home-div">
        <div class="order-title div-align-justify-center">
          <img class="img-40" src="@/static/images/order/40px_star.png"/>
          <span class="heading-h3">恭喜出单啦～</span>
        </div>
        <div class="order-main">
          <div class="order-main-img">
            <img class="img-279" :src="order.product.picture">
          </div>
          <div class="order-main-content">
            <div class="order-main-content-desc paragraph-p2-light text-desc">
              {{ order.product.desc }}
            </div>
            <div class="order-main-content-row">
              <div class="order-main-content-row-left paragraph-p3-light color-grey">
                {{ order.product.size + '；' + order.product.fitting}}
              </div>
              <div class="order-main-content-row-right paragraph-p3-heavy">
                {{ '$' + order.product.totalPrice }}
              </div>
            </div>
            <div class="order-main-content-user">
              <div class="order-main-content-user-left div-align-justify-center">
                <img class="icon-24" src="@/static/images/profile/user.png" />
                <span class="paragraph-p2-light">{{ order.saleUser }}</span>
              </div>
              <div class="order-main-content-user-right paragraph-p3-light color-grey">
                {{ order.orderTime }}
              </div>
            </div>
          </div>
        </div>
        <div class="div-align-justify-center">
          <div class="order-list-button body-heavy div-align-justify-center" @click="viewOrderList">查看订单列表</div>
        </div>
      </div>
    </div>
    </v-touch>
  </div>
</template>

<script>
import {viewOrderDetail} from "@/request/api";
import {Toast} from "vant";

export default {
  name: "OrderViewSuccess",
  data() {
    return {
      order: {
        id: this.$route.params.id,
        saleUser: '',
        orderTime: '',
        product: {
          picture: '',
          desc: '',
          fitting: '',
          size: '',
          totalPrice: 0,
        },
      },
    }
  },
  mounted() {
    this.getOrderDetail()
  },
  methods: {
    getOrderDetail() {
      viewOrderDetail({pathParam: this.$route.params.id}).then(res => {
        const {State, Data, Msg} = res
        if (State) {
          const {
            id,
            created_at,
            product
          } = Data
          const {
            product_image_list,
            product_description,
            size,
            accessories,
            product_sale_price,
            user
          } = product
          this.order.id = id
          this.order.saleUser = user
          this.order.orderTime = created_at
          this.order.product.picture = product_image_list ? product_image_list[0] : ''
          this.order.product.desc = product_description
          this.order.product.size = size
          this.order.product.fitting = accessories
          this.order.product.totalPrice = product_sale_price
        } else {
          Toast(Msg)
        }
      })
    },
    viewOrderList() {
      this.$router.push(this.GLOBAL.pathSetting.order.main + '?tab=0')
    },
    onSwiperRight() {
      this.$router.go(-1)
    }
  },
}
</script>

<style scoped>
.home{
  width: 100%;
  height: 100vh;
  background: url("../../../static/images/order/order-background.png") center center no-repeat;
  background-size: 100% 100%;
}
.home-div {
  height: 600px;
}
.order-title {
  height: 40px;
}
.order-main {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px 16px;
  margin: 32px 32px 16px 32px;
  background: #FFFFFF;
  border-radius: 16px;
}
.order-main-img {
  height: 279px;
  width: 279px;
  border-radius: 8px;
}
.order-main-content {
}
.order-main-content-desc {}
.order-main-content-row {
  display: flex;
  width: 280px;
  margin: 8px 0;
}
.order-main-content-row-left {
  width: 50%;
}
.order-main-content-row-right {
  width: 50%;
  text-align: right;
}
.order-main-content-user {
  display: flex;
  width: 280px;
  margin: 8px 0;
}
.order-main-content-user-left {
  width: 25%;
}
.order-main-content-user-right {
  width: 75%;
  text-align: right;
}
.order-list-button {
  padding: 0 16px;
  width: 128px;
  height: 44px;
  /* Primary/4(base) */
  background: #FCD538;
  /* Shadow/primary_btn */
  box-shadow: 0 4px 24px rgba(251, 202, 4, 0.32);
  border-radius: 24px;
}
.img-279 {
  width: 279px;
  height: 279px;
  border-radius: 8px;
}
</style>